<script setup lang="ts">
  import get from '@/utils/get'
  import { useRoute,useRouter } from 'vue-router'
  import {getList,getbannerList,getdataapi} from './service'
  import { defineOptions  ,onMounted ,reactive,ref,watch} from 'vue';
  import Footer from '@/components/footer.vue'
  import { useTransition } from '@vueuse/core'
  defineOptions({
    name: 'home'
  })
  const router = useRouter();
  const source = ref(0);
  const show = ref(false);
  const show2 = ref(false);
  let route = useRoute();
  let outputValue = ref<any>(null);
  outputValue = useTransition(source, {
    duration: 1500,
  })
  const source2 = ref(0);
  let outputValue2 = ref<any>(null);
  outputValue2 = useTransition(source2, {
    duration: 1500,
  })
  const source3 = ref(0);
  let outputValue3 = ref<any>(null);
  outputValue3 = useTransition(source3, {
    duration: 1500,
  })
  const source4 = ref(0);
  let outputValue4 = useTransition(source4, {
    duration: 1500,
  })
  const source5 = ref(0);
  const source6 = ref(0);
  let outputValue6=useTransition(source6, {
    duration: 1500,
  })

  const source7 = ref(0);
  let outputValue7=useTransition(source7, {
    duration: 1500,
  })
  const source8 = ref(0);
  let outputValue8=useTransition(source8, {
    duration: 1500,
  })
  const source9 = ref(100);
  const state = reactive<any>({
    scrollTop:0,
    datainfo:{

    },
    list:[{
      symbolName:'USD/JPY',
      bid:'111.0000',
      ask:'110.0000',
      spread:'0.0000',
    }],
    bannerList:[{
      img:'',
      title:'',
      desc:''
    }],
    tabindex:0,
    options: {
            // licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',// 购买了key可以填，
        menu: '#menu',
        anchors: ['page1', 'page2', 'page3', 'page4', 'page5','page6'], // 每一个分页的id，页面滚动时可观察地址栏发生变化
        afterLoad: (data:any)=>{
          let hash = route.hash;
          if(hash=='#page4'){
            console.log(state.datainfo.user_count)
            show.value = true;
            source.value = 12;
            source2.value = state.datainfo.optimize_count?Number(state.datainfo.optimize_count):0;
            source3.value = state.datainfo.transaction_count?Number(state.datainfo.transaction_count):0;
            source4.value = state.datainfo.business_count?Number(state.datainfo.business_count):0;
          }else{
            show.value = false;
            source.value = 0;
            source2.value = 0;
            source3.value = 0;
            source4.value = 0;
          }
          if(hash=='#page5'){
            show2.value = true;
            source5.value = 85;
            source6.value = 2000;
            source7.value = 10;
            source8.value = 99.99;
          }else{
            show2.value = false;
            source5.value = 0;
            source6.value = 0;
            source7.value = 0;
            source8.value = 0;
          }
        }
    },
  })

  const getInit=(type='1')=>{
    getList({type:type}).then((res:any)=>{
      if(res && res.title=='success'){
        const data = get(res, 'data',[]);
        state.list = data;
      }
    }).catch(err=>{
      console.log(err)
    })
  }
  const getData=()=>{
    getdataapi().then((res:any)=>{
      if(res && res.title=='success'){
        let data = res.data;
        state.datainfo = data||{};
      }
    })
  }
  

  const getbannerListInit=()=>{
    getbannerList().then((res:any)=>{
      if(res && res.title=='success'){
        const data = get(res, 'data',[]);
        state.bannerList = data;
      }
    }).catch(err=>{
      console.log(err)
    })
  }

  const onTab=(index:any)=>{
    if(index==state.tabindex){
      return false;    
    }
    state.tabindex = index;
    getInit(index+1)
  }

  const gohome=(path:string)=>{
    router.push({
      path:path
    })
  }

  onMounted(()=>{
    getInit('1')
    getbannerListInit();
    getData();

  })
</script>

<template>
  <div class="homecontainer">
    <fullPage :options="state.options">
        <div class="section" data-id="page1">
          <div class="lunbobox">
            <!-- <div class="bannerbox" :style="{height:'100vh'}">
                  <p>{{}}</p>
                </div> -->
            <!-- <el-carousel height="100vh">
              <el-carousel-item v-for="(item,index) in state.bannerList" :key="index">
                <div class="bannerbox" :style="{backgroundImage:'url('+item.img+')',height:'100vh'}">
                  <p>{{}}</p>
                </div>
              </el-carousel-item>
            </el-carousel> -->
          </div>
        </div>
        <div class="section" data-id="page2">
          <div>
            <div class="chanpinbox">
              <div>
                <h3>A Trustworthy Foreign Exchange Trading Partner</h3>
                <p>In today's increasingly integrated global financial markets, foreign exchange trading has become a focal point for many investors. Choosing a secure, reliable, and powerful foreign exchange platform is crucial.  GMG is committed to providing investors with an excellent trading experience.</p>
                <div class="tabbox">
                  <div :class="state.tabindex+''=='0'?'tabactive':null" @click="onTab(0)">
                    Foreign Exchange
                  </div>
                  <div :class="state.tabindex+''=='1'?'tabactive':null" @click="onTab(1)">
                    Stock Index
                  </div>
                  <div :class="state.tabindex+''=='2'?'tabactive':null" @click="onTab(2)">
                    Precious Metal
                  </div>
                  <div :class="state.tabindex+''=='3'?'tabactive':null" @click="onTab(3)">
                    Securities Stocks
                  </div>
                </div>
                <div class="tablebox">
                  <table border="0">
                    <thead>
                      <tr>
                        <th>
                          &nbsp;
                        </th>
                        <th>
                          Sell
                        </th>
                        <th>
                          Buy
                        </th>
                        <th>
                          Spread
                        </th>
                        <th>
                          &nbsp;
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(item,index) in state.list" :key="index">
                        <td>
                          <div>
                            <img :src="item.img?item.img:null" alt="">
                            <span>{{item.symbolName?item.symbolName:'--'}}</span>
                          </div>
                        </td>
                        <td>
                          {{item.bid?item.bid:'--'}}
                        </td>
                        <td>
                          {{item.ask?item.ask:'--'}}
                        </td>
                        <td>
                          {{item.spread?item.spread:'--'}}
                        </td>
                        <td>
                          <button  @click="gohome('/openaccount')">Trade Now</button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <nodata v-if="state.list.length==0"></nodata>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section" data-id="page3" >
          <div class="jianguanbox">
            <h3>Platform Regulation and Security Assurance</h3>
            <p>GMG is regulated by strict financial regulatory authorities and adheres to the highest industry standards. The platform employs advanced encryption technology to ensure the security of customer funds and trading data, giving you peace of mind for your investments</p>
            <div class="jianguanlistbox">
              <div>
                <img src="./images/11.png" alt="">
                <p>ASIC Australia</p>
                <p>GMG Full Disclosure Orders</p>
                <p>Authorization and Regulation</p>
                <p>Australian (ASIC)</p>
                <p>Regulatory Number</p>
                <p>500991</p>
              </div>
            </div>
          </div>
        </div>
        <div class="section" data-id="page4">
          <div class="shujubox">
            <h3>A Wide Range Of Trading Products</h3>
            <p>The platform offers a broad range of trading products, including major currency pairs, minor currency pairs, and emerging market currency pairs. In addition, it includes popular CFD products such as precious metals and crude oil, catering to your diverse investment needs.</p>
            <div class="shujucardbox">
              <div>
                <p class="statisticbox"><el-statistic v-if="show" value-style="font-weight: 900;font-size: 50px;color: #E24737;" :value="outputValue" /><span style="margin-bottom:5px;"><span v-if="!show">0</span></span></p>
                <p>Number Of Users</p>
              </div>
              <div>
                <p class="statisticbox"><el-statistic v-if="show" value-style="font-weight: 900;font-size: 50px;color: #E24737;" :value="outputValue2" /><span style="margin-bottom:5px;"><span v-if="!show">0</span></span></p>
                <p>Trading Volume</p>
              </div>
              <div>
                <p class="statisticbox"><el-statistic v-if="show" value-style="font-weight: 900;font-size: 50px;color: #E24737;" :value="outputValue3" /><span style="margin-bottom:5px;"><span v-if="!show">0</span></span></p>
                <p>Region</p>
              </div>
              <div>
                <p class="statisticbox"><el-statistic v-if="show" value-style="font-weight: 900;font-size: 50px;color: #E24737;" :value="outputValue4" /><span style="margin-bottom:5px;"><span v-if="!show">0</span></span></p>
                <p>Optimize The Gain</p>
              </div>
            </div>
          </div>
        </div>
        <div class="section" data-id="page4">
          <div>
            <div class="jiaoyixitongbox">
              <h3 style="margin-bottom:40px;">Advanced Trading Platform</h3>
              <p>Fast execution, stable and reliable: Utilizing advanced trading technology to ensure rapid and stable order execution, helping you seize fleeting market opportunities.</p>
              <div class="jiaoyixitonglistgroup">
                <ul>
                  <li>
                    <p><el-statistic v-if="show2" value-style="font-weight: 900;font-size: 50px;color:#BB9B73;" :value="outputValue6" /><span v-if="!show2">0</span><span>+</span></p>
                    <p>Aggregation Per Second</p>
                  </li>
                  <li>
                    <p><el-statistic v-if="show2" value-style="font-weight: 900;font-size: 50px;color:#BB9B73;" :value="outputValue7" /><span v-if="!show2">0</span><span>MS</span></p>
                    <p>Fast Order Execution</p>
                  </li>
                  <li>
                    <p><el-statistic v-if="show2" value-style="font-weight: 900;font-size: 50px;color:#BB9B73;" :value="outputValue8"  :precision="2"/><span v-if="!show2">0</span><span>%</span></p>
                    <p>Stable Data Up To</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- <Footer></Footer> -->
        </div>
        <div class="section" data-id="page6">
          <div>
            <div class="hezuobox">
              <h3 style="margin-bottom:40px;">Online trading data</h3>
              <p>GMG provides customers with an intuitive, user-friendly, and powerful trading platform. Whether on desktop, mobile, or web, you can trade anytime, anywhere. The platform features real-time market quotes, chart analysis, technical indicators, and more to assist you in making informed trading decisions</p>
              <div class="logoscard">
                <div class="logositemcard">
                  <div>
                    <img src="./images/logos/1.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/2.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/3.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/4.png" alt="">
                  </div>
                </div>
                <div class="logositemcard">
                  <div>
                    <img src="./images/logos/5.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/6.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/7.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/8.png" alt="">
                  </div>
                </div>
                <div class="logositemcard">
                  <div>
                    <img src="./images/logos/9.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/10.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/11.png" alt="">
                  </div>
                  <div>
                    <img src="./images/logos/12.png" alt="">
                  </div>
                </div>
              </div>
            </div>
            <Footer></Footer>
          </div>
        </div>
    </fullPage>
  </div>
</template>

<style lang="scss" scoped>
  @use './index';
</style>
